<template>
    <div class="article-read-out relative-full">
        <vue-scroll>
            <div class="article-read-wrapper">
                <div class="article-container">

                    <template v-if="!loading">
                        <h1 style="margin-top: 0;">{{ article.title }}</h1>
                        <div style="color:#888888">
              <span
                      style="display: inline-block;margin-right: 6px">{{
                  article.createTime.split('.')[0].split('T').join(' ')
                }}</span>
                            <span class="ml-small-tag" v-for="(v,i) in article.tag" :key="i">{{ v }}</span>
                        </div>
                        <div v-if="article.cover" style="margin:18px;text-align: center">
                            <img style="max-height: 320px" :src="article.cover" alt="">
                        </div>
                        <div class="ck-content" v-html="article.content"></div>
                    </template>

                    <div class="article-action">
                        <div v-for="v in actions"
                             :key="v.id"
                             v-popover.bottom="{ name: v.name }"
                             class="article-action-item">
                            <span class="action-wrapper"
                                  :class="{'active':hoverAction===v.id}">
                                 <img :src="v.src"
                                      @mouseenter="hoverAction=v.id"
                                      @mouseout="hoverAction=''"
                                      @click="handleActionClick(v)"
                                 />
                            </span>
                            <span v-if="v.name==='like'" class="like-action">{{ article.likes }}</span>
                        </div>
                    </div>
                </div>
                <!--首页的小栏目-->
                <Plugs></Plugs>
            </div>
        </vue-scroll>

        <div style="position: absolute;top: -55px;left: 0;">
            <popover v-for="v in actions" :name="v.name" event="hover" :key="v.id" :width="40">{{v.desc}}</popover>
        </div>
    </div>
</template>

<script>
  import { GetArticle ,UpdateArticleLikes} from '~/api/blog-api'

  export default {
    name: 'ArticleRead',
    head(){
      return {
        title:'详情'
      }
    },
    data: () => ({
      loading: true,
      article: {},
      actions: [
        {
          id: 1,
          name: 'share',
          desc: '分享',
          src: '/image/others/network-1.1s-47px.svg'
          // src: '/image/others/link-1.1s-47px.png'
        },
        {
          id: 2,
          name: 'like',
          desc: '喜欢',
          // src: '/image/others/heart-1.1s-47px.png'
          src: '/image/others/heart-1.1s-47px.svg'
        }
      ],
      hoverAction: '',
      updateLikesTimeout: null
    }),
    watch: {

      $route: {
        handler (val, oldval) {
          this.getArticleDetail(val.params.id)
        },
        // 深度观察监听
        immediate: true
      }
    },
    methods: {
      getArticleDetail (articleId) {
        GetArticle({ _id: articleId }).then(res => {
          this.article = res.data[0]
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false
        })
      },

      handleActionClick (action) {
        if (action.name === 'like') {
          if (this.updateLikesTimeout) {
            clearTimeout(this.updateLikesTimeout)
          }
          this.article.likes += 1
          this.updateLikesTimeout = setTimeout(() => {
            UpdateArticleLikes({ likes: this.article.likes, _id: this.article._id })
          }, 4000)
        }
      }
    }
  }
</script>

<style src="../../assets/ckeditor/content-styles.css"></style>

<style>
    /*ArticleRead*/
    .article-read-out .vue-popover{
        /*background-color: rgba(255, 217, 218, 0.51);*/
    }

    .article-read-wrapper {
        position: relative;
        width: 100%;
        /*background-color: #f3f6fb;*/
        color: #545454;
        overflow: auto;
    }

    .ml-small-tag {
        cursor: pointer;
        display: inline-block;
        margin-left: 6px;
        height: 16px;
        padding: 0 14px;
        border-radius: 4px;
        line-height: 16px;
        font-size: 12px;
        background-color: #54b3ea;
        color: white
    }

    .ml-small-tag:hover {
        background-color: #53c0ff;
    }

    .article-read-wrapper .article-container {
        background-color: white;
    }

    .article-action {
        margin-top: 40px;
        display: flex;
        justify-content: right;
        padding: 8px 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .article-action-item {
        display: flex;
        align-items: center;
    }

    .like-action {
        color: #ff6d6b;
        font-size: 14px;
        font-weight: bold;
    }

    .action-wrapper {
        display: grid;
        place-items: center;
        width: 47px;
        height: 47px;
        border-radius: 50%;
        margin-right: 6px;
        transition: .15s;
    }

    .action-wrapper > img {
        width: 85%;
        height: 85%;
        transition: .2s;
        cursor: pointer;

    }

    .action-wrapper.active {
        background-color: rgba(255, 217, 218, 0.51);
    }

    .action-wrapper.active > img {
        animation: actionAnimate 0 .9s;
        animation-iteration-count: infinite;
    }

    @keyframes actionAnimate {
        /*animate here,0%可以设置动画的初始状态*/
        0% {
            transform: scale(1);
        }
        10% {
            transform: scale(1.05);
        }
        20% {
            transform: scale(1.11);
        }
        30% {
            transform: scale(1.18);
        }
        40% {
            transform: scale(1.22);
        }
        100% {
            transform: scale(1);
        }
    }

    @media (min-width: 1200px) {
        .article-read-wrapper {
            display: flex;
        }
    }
</style>
